<template>
    <transition name="fade">
        <div class="toast" v-show="show">
            {{msg}}
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            show:false,
            msg:''
        }
    }
}
</script>
<style scoped>
.toast {
    padding: 10px 20px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top:50%;
    transform: translateX(-50%);
    z-index: 9;
    color:white;
    background: rgba(0,0,0,.5);
    box-shadow: 0 0 3px #999;
    border-radius: 3px;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.3s ease-out;
}
.fade-enter {
  opacity: 0;
  transform: scale(1.2);
}
.fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
} 
</style>
